<template>
  <div id="openlayersContainer" ref="openlayersContainer"></div>
  <div class="top-line">
    <div class="search-container">
      <div>请输入城市名称</div>
      <el-input v-model="cityName" style="width: 240px;height: 40px;" placeholder="请输入城市名称"  />
    </div>
    
    <el-select v-model="drawType" placeholder="请选择绘制图形" size="large" style="width: 240px">
      <el-option v-for="item in drawTypeList" :key="item.value" :label="item.label" :value="item.value" />
    </el-select>
    <el-select v-model="iconType" placeholder="请选择图标类型" size="large" style="width: 240px">
      <el-option v-for="item in iconTypeList" :key="item.value" :label="item.label" :value="item.value" />
    </el-select>
  </div>
  <div class="button-container ">
    <!-- <button @click="clearLine">清除line</button>
    <button @click="startDraw">开始绘图</button>
    <button @click="stopDraw">停止绘图</button> -->
  </div>
</template>

<script setup>
import { onMounted ,ref} from 'vue'
import View from 'ol/View';
import TileLayer from 'ol/layer/Tile.js'
import Map from 'ol/Map.js'
import XYZ from 'ol/source/XYZ.js'
import 'ol/ol.css'
import Feature from 'ol/Feature.js'
import Point from 'ol/geom/Point.js';
import VectorSource from 'ol/source/Vector.js'
import VectorLayer from 'ol/layer/Vector.js'
import Style from 'ol/style/Style.js'
import Icon from 'ol/style/Icon.js'
import CircleStyle from 'ol/style/Circle.js'
import Fill from 'ol/style/Fill.js'
import Text from 'ol/style/Text.js'
import Stroke from 'ol/style/Stroke.js'
import { LineString } from 'ol/geom';
import GeoJSON from 'ol/format/GeoJSON.js'
import Draw from 'ol/interaction/Draw.js'
import { click } from 'ol/events/condition';
import { defaults } from 'ol/control/defaults';
import ScaleLine from 'ol/control/ScaleLine.js';
import MousePosition from 'ol/control/MousePosition.js';
import Fullscreen from 'ol/control/FullScreen.js';
import Zoom from 'ol/control/Zoom';
let map = null

const cityName = ref('')
const iconType = ref('')
const drawType = ref('')
const drawTypeList = []
const iconTypeList = []
onMounted(async () => {
  map = new Map({
    target: 'openlayersContainer',
    // controls: defaults({
    //   attribution: false,
    //   // zoom: false,
    //   // rotate: false,
    //   // attribution: false,
    // }),
    controls: [new ScaleLine(), new MousePosition(), new Fullscreen(), new Zoom()]
  });
  map.setView(view)
  map.addLayer(gaodeLayer);

})

const view = new View({
  center: [114.3165, 30.5264],
  zoom: 5,
  maxZoom: 18,
  minZoom: 2,
  projection: 'EPSG:4326'
})
// 高德地图
const gaodeSourse = new XYZ({
  // 高德地图
  url: 'http://wprd0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&style=7&x={x}&y={y}&z={z}',
})
const gaodeLayer = new TileLayer({
  source: gaodeSourse
})



</script>

<style>
* {
  margin: 0;
  padding: 0;
}

#openlayersContainer {
  width: 100vw;
  height: 100vh;

}

.button-container {
  position: absolute;
  left: 100px;
  top: 100px;
  z-index: 1;
}
.top-line {
  width: 100%;
  height: 80px;
  position: absolute;
  top: 0;
  z-index: 99;
  background: blue;
  display: flex;
  align-items: center;
  gap: 100px;
}
.search-container{
    display: flex;
   align-items: center;
   gap: 30px;
   color: #fff;
   padding-left: 30px;
}
</style>
